<template>
  <div class="bg-gray-50 min-h-screen font-sans">
    <div class="container mx-auto px-4 py-8 max-w-7xl">
      <div class="mb-8">
        <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 mb-2">数据展示</h1>
        <p class="text-gray-600">展示嵌套数据结构的详细信息</p>
      </div>
      
      <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="p-6 border-b border-gray-100">
          <h2 class="text-xl font-semibold text-gray-800">数据概览 {{comment}} </h2>
          <p class="text-gray-500 mt-1">点击展开查看详细数据 <a @click="toggleOverview" style="color: red;">【点击清理数据】</a></p>
        </div>
        
        <div class="overflow-x-auto">
          <table class="color-border">
            <thead class="bg-gray-50">
              <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Command UUID
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  数据条目
                </th>
                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                  操作
                </th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              <tr v-for="(item, index) in data.result" :key="item.command_uuid" class="hover:bg-gray-50 transition-colors duration-150">
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="flex items-center">
                    <div class="text-sm font-medium text-gray-900">
                      {{ item.command_uuid }}
                    </div>
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-gray-900">{{ item.data.length }} 条</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                  <button class="text-primary hover:text-primary/80 focus:outline-none" @click="toggleNestedTable(index)">
                    <i :class="{'fa-chevron-down': !expandedIndices.includes(index), 'fa-chevron-up': expandedIndices.includes(index), 'rotate-icon': true}"></i> 查看详情
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      
      <!-- 嵌套表格容器 -->
      <div class="mt-6 space-y-6">
        <div v-for="(item, index) in data.result" :key="item.command_uuid" v-show="expandedIndices.includes(index)" 
             class="bg-white rounded-xl shadow-md overflow-hidden hover-scale table-shadow">
          <div class="p-4 border-b border-gray-100 bg-gray-50">
            <h3 class="text-lg font-medium text-gray-800 flex items-center">
              <i class="fa fa-database text-primary mr-2"></i>
              Command UUID: {{ item.command_uuid }}
            </h3>
            <p class="text-sm text-gray-600 mt-1">数据详情（{{ item.data.length }} 条记录）</p>
          </div>
          <div class="overflow-x-auto">
            <table class="dashed-border">
              <thead class="bg-gray-50">
                <tr>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    IP 地址
                  </th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    接收
                  </th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    发送
                  </th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    状态
                  </th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr v-for="dataItem in item.data" :key="dataItem.ip" class="hover:bg-gray-50 transition-colors duration-150">
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">{{ dataItem.ip }}</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">{{ dataItem.receive }}</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="text-sm text-gray-900">{{ dataItem.send }}</div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                      正常
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import router from '../router';

const route = useRoute();
let comment = route.query.comment
// 数据
const data = ref({ result: [] });
// 初始化
onMounted(async () => {
  const toggleOverview = async () => {
  try {
    const response = await fetch(`/api/v3/command/search?comment=${comment}`);
    if (!response.ok) throw new Error('Request failed');
    const result = await response.json();
    console.log('Toggle overview result:', result);
    // 处理返回数据，例如更新表格数据
    data.value = result;
  } catch (error) {
    console.error('Error toggling overview:', error);
    alert('获取数据失败');
  }
};

// 原有的fetch请求代码
const response = await fetch(`/api/v3/command/search?comment=${comment}`);
  const result = await response.json();
  data.value = result;
});

// 存储展开的索引
const expandedIndices = ref([]);

// 切换嵌套表格显示/隐藏
const toggleNestedTable = (index) => {
  if (expandedIndices.value.includes(index)) {
    expandedIndices.value = expandedIndices.value.filter(i => i !== index);
  } else {
    expandedIndices.value.push(index);
  }
};

const toggleOverview = async () => {
  try {
    const response = await fetch(`/api/v3/command/del?comment=${comment}`);
    if (!response.ok) throw new Error('Request failed');
    const result = await response.json();
    console.log('Toggle overview result:', result);
    // 处理返回数据，例如更新表格数据
    data.value = result;
  } catch (error) {
    console.error('Error toggling overview:', error);
    alert('获取数据失败');
  }
};
</script>

<style scoped>
 /* 基本表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            font-family: Arial, sans-serif;
            margin-bottom: 20px;
        }
        
        /* 表格标题样式 */
        h2 {
            color: #333;
            font-size: 1.5em;
            margin-top: 30px;
            margin-bottom: 15px;
        }
        
        /* 基本边框表格 */
        .basic-border th, .basic-border td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        
        .basic-border th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        
        /* 外边框表格 */
        .outer-border {
            border: 1px solid #ddd;
        }
        
        .outer-border th, .outer-border td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        .outer-border th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        
        /* 行边框表格 */
        .row-border th, .row-border td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        .row-border th {
            background-color: #f2f2f2;
            font-weight: bold;
            border-top: 1px solid #ddd;
        }
        
        /* 彩色边框表格 */
        .color-border th, .color-border td {
            border: 1px solid #99b3e6;
            padding: 8px;
            text-align: left;
        }
        
        .color-border th {
            background-color: #cce0ff;
            font-weight: bold;
            color: #003399;
        }
        
        /* 圆角边框表格 */
        .rounded-border {
            border-collapse: separate;
            border-spacing: 0;
            border: 1px solid #ddd;
            border-radius: 6px;
            overflow: hidden;
        }
        
        .rounded-border th, .rounded-border td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        .rounded-border th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        
        /* 粗边框表格 */
        .thick-border th, .thick-border td {
            border: 2px solid #555;
            padding: 8px;
            text-align: left;
        }
        
        .thick-border th {
            background-color: #e6e6e6;
            font-weight: bold;
        }
        
        /* 虚线边框表格 */
        .dashed-border th, .dashed-border td {
            border: 1px dashed #999;
            padding: 8px;
            text-align: left;
        }
        
        .dashed-border th {
            background-color: #f9f9f9;
            font-weight: bold;
        }
</style>